<template>
	<view class="">
		<view class="order-status">
			订单状态: <text> {{ orderInfo.status_text }}</text>
		</view>
		<view class="addressBox" v-if="orderInfo.address">
			<view class="buy-address">
				<view class="buy-address-content">
					<view class="buy-address-item addressicon">
					</view>
					<view class="buy-address-txt">
						<view class="user">收货人:{{ orderInfo.address.user_name }}</view>
						<view class="address">{{ orderInfo.address.province }}/{{ orderInfo.address.city }}/{{
				orderInfo.address.county }} {{ orderInfo.address.detail }}</view>
						<view class="address">{{ orderInfo.address.phone }}</view>
					</view>
					<view class="buy-address-item moreicon">
					</view>
				</view>
				<view class="buy-address-line"></view>
			</view>
		</view>
		<view class="shoplist">
			<view class="itemlist">
				<view class="buy-shop-info" v-for="(item, index) in orderInfo.detail" :key="index">
					<image :src="item.logo" mode=""></image>
					<view class="shop-info-text">
						<view class="shop-title">
							{{ item.goods_name }}
						</view>
						<view class="shop-attr">{{ item.sku_name }}</view>
						<view class="shop-price-num">
							<text class="price">￥{{ item.price }}</text>
							<text class="num">X {{ item.num }} </text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="buy-shop-list" style="padding:20rpx 0;">
			<view class="buy-shop-item">
				<view class="shop-item-left">应付金额</view>
				<view class="shop-item-right">{{ orderInfo.order_price }}</view>
			</view>
			<view class="buy-shop-item">
				<view class="shop-item-left">实际支付</view>
				<view class="shop-item-right">{{ orderInfo.pay_price }}</view>
			</view>
			<view class="buy-shop-item" v-if="orderInfo.coupon_amount > 0">
				<view class="shop-item-left">优惠金额</view>
				<view class="shop-item-right" style="color:red">-{{ orderInfo.coupon_amount }}</view>
			</view>
			<!-- <view class="buy-shop-item">
				<view class="shop-item-left">配送方式</view>
				<view class="shop-item-right">
					顺丰快递
				</view>
			</view> -->
			<view class="buy-shop-item" v-if="orderInfo.remark">
				<view class="shop-item-left">备注</view>
				<view class="shop-item-right">
					{{ orderInfo.remark }}
				</view>
			</view>
			<view class="buy-shop-item">
				<view class="shop-item-left">总计</view>
				<view class="shop-item-right">共{{ orderInfo.total_num }}件商品 合计:￥{{ orderInfo.order_price }}</view>
			</view>
			<view class="buy-shop-item">
				<view class="shop-item-left">支付方式</view>
				<view class="shop-item-right">{{ orderInfo.pay_way_text }}</view>
			</view>
			<view class="buy-shop-item">
				<view class="shop-item-left">下单时间</view>
				<view class="shop-item-right">{{ orderInfo.create_time }}</view>
			</view>
			<view class="buy-shop-item" v-if="orderInfo.status > 2">
				<view class="shop-item-left">支付时间</view>
				<view class="shop-item-right">{{ orderInfo.pay_time }}</view>
			</view>
			<view class="action-box b-t" v-if="orderInfo.action">
				<button class="action-btn" v-if="orderInfo.action.cancel" @click="cancelOrder(orderInfo)">取消订单</button>
				<button class="action-btn recom" v-if="orderInfo.action.go_pay" @click="goPay(orderInfo)">立即支付</button>
	
				<button class="action-btn recom"
					v-if="orderInfo.action.go_refund"
					@click="goRefund(orderInfo)">申请退款</button>
	
				<button class="action-btn recom"
					v-if="orderInfo.action.take_delivery"
					@click="takeDelivery(orderInfo)">立即收货</button>
				
					<button class="action-btn recom"
					v-if="orderInfo.action.go_comment"
					@click="goComments(orderInfo)">去评价</button>
			</view>
		</view>
		

	</view>
</template>

<script>
export default {
	data() {
		return {
			orderInfo: {},
		};
	},
	async onLoad(options) {
		const { data } = await this.$http.order.orderDetail(options)
		this.orderInfo = data;
	},
	methods: {
		//取消订单
		async cancelOrder(item) {
			uni.showModal({
				content: "确认关闭当前订单吗？",
				success: async (e) => {
					if (e.confirm) {
						await this.$http.order.cancelOrder({ order_id: item.id })
						await this.resetData();
					}
				},
			});
		},
		async takeDelivery(item) {
			uni.showModal({
				content: "确认已经收到货了么？收货后状态无法变更",
				success: async (e) => {
					if (e.confirm) {
						await this.$http.order.takeDelivery({ order_id: item.id })
						await this.resetData();
					}
				},
			});
		},
		goPay(item) {
			uni.redirectTo({
				url: '/pages/money/pay?order_no=' + item.order_no
			})
		},
		goRefund(item) {
			uni.redirectTo({
				url: '/pages/order/refund?order_no=' + item.order_no
			})
			// this.$toast("去退款")
		},
		goComments(item) {
			// uni.redirectTo({
			// 	url: '/pages/order/refund?order_no=' + item.order_no
			// })
			this.$toast("去评价")
		},
	},
}
</script>

<style scoped lang="scss">
.order-status {
	height: 100rpx;
	background: #fff;
	font-size: 30rpx;
	line-height: 100rpx;
	padding: 0 30rpx;
	border-top: 1rpx solid #e5e5e5
}

.order-status text {
	color: #00C3F5;
}

.addressBox {
	margin-top: 20rpx
}

.shoplist {
	background: #fff;
	margin-top: 20rpx
}

/* 列表信息 */
.buy-shop-list {
	background: #fff;
	border-top: 1rpx solid #e5e5e5
}

.buy-shop-item {
	display: flex;
	justify-content: space-between;
	min-height: 80rpx;
	font-size: 24rpx;
	margin: 0 20rpx;
	align-items: center;
}

.shop-item-left {
	color: #333;
	display: flex;
	align-items: center;
}

.shop-item-right {
	color: #999;
	display: flex;
	align-items: center;
}

.shop-item-right i {
	font-size: 16px;
	paddint-top: 2px;
}

.shop-item-right radio {
	transform: scale(0.7)
}

.buy-shop-item input {
	width: 100%;
	background: #f4f4f4;
	height: 70rpx;
	border-radius: 70rpx;
	font-size: 24rpx;
	text-indent: 30rpx;
}

/* 地址样式 */
.buy-address {
	margin: 0rpx 0rpx 0;
	background: #fff;
	height: 198rpx;
	border-radius: 10rpx;
	overflow: hidden;
}

.buy-address-content {
	height: 190rpx;
	display: flex;
}

.buy-address-txt {
	flex: 1;
}

.buy-address-txt .user {
	font-size: 28rpx;
	line-height: 50rpx;
	margin-top: 20rpx;
	margin-bottom: 10rpx;
}

.buy-address-txt .address {
	font-size: 24rpx;
	color: #999;
	line-height: 35rpx;
}

.buy-address-item {
	width: 100rpx;
	text-align: center;
}

.buy-address-item.moreicon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.buy-address-item.addressicon {
	margin-top: 25rpx;
	color: #999;
}

.buy-address-line {
	height: 8rpx;
	background-image: linear-gradient(135deg, #82c9ff 8px, transparent 0, transparent 16px, #ff8282 0, #ff8282 32px, transparent 0, transparent 0, transparent 40px, #82c9ff 0, #82c9ff);
	background-color: #fff;
	background-size: 68px 8rpx;
}

.itemlist .buy-shop-info {
	border-top: 1rpx solid #e5e5e5;
}

.itemlist .buy-shop-info:nth-of-type(1) {
	border-top: none;
}

.buy-shop-info {
	display: flex;
	padding: 10rpx 0rpx;
	margin: 0 20rpx;
	background: #fff;
}

.buy-shop-info image {
	width: 200rpx;
	height: 200rpx;
	margin-right: 10rpx;
}

.shop-info-text {
	flex: 1;
}

.shop-title {
	font-size: 28rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	color: #333;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.shop-attr {
	font-size: 24rpx;
	color: #999;
	line-height: 40rpx;
}

.shop-price-num {
	height: 40rpx;
	font-size: 28rpx;
	margin-top: 10rpx;
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
}

.shop-price-num .price {
	color: red;
}

.shop-price-num .num {
	color: #999;
}

.action-box {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100upx;
	position: relative;
	padding-right: 30upx;
}

.action-btn {
	width: 160upx;
	height: 60upx;
	margin: 0;
	margin-left: 24upx;
	padding: 0;
	text-align: center;
	line-height: 60upx;
	font-size: $font-sm + 2upx;
	color: $font-color-dark;
	background: #fff;
	border-radius: 100px;

	&:after {
		border-radius: 100px;
	}

	&.recom {
		background: #fff9f9;
		color: $base-color;

		&:after {
			border-color: #f7bcc8;
		}
	}
}
</style>
